<template>
  <div id="home" @click="delayScreenProtect">
    <!-- nav栏 -->
    <Nav />
    <!-- banner大图 -->
    <div class="banner">
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide
          v-for="(img,index) in bannerImages"
          :key="index"
          :style="{backgroundImage:`url(${img.img})`}"
        ></swiper-slide>
      </swiper>
    </div>
    <!-- 按钮组 -->
    <div class="btn_group">
      <div
        class="btn"
        :style="{backgroundImage:`url(${item.image})`}"
        v-for="(item,index) in funcBtn"
        :key="index"
        @click="route2(item.name)"
      ></div>
    </div>
  </div>
</template>

<script>
import Nav from "./nav";
import { mapState, mapMutations } from "vuex";
export default {
  props: {},
  data() {
    return {
      funcBtn: [
        {
          name: "Map",
          image: require("../assets/images/home/home_navigation_floor.png")
        },
        {
          name: "Shopping",
          image: require("../assets/images/home/home_navigation_shopping.png")
        },
        {
          name: "Food",
          image: require("../assets/images/home/home_navigation_dining.png")
        },
        {
          name: "Movie",
          image: require("../assets/images/home/home_navigation_movie.png")
        },
        {
          name: "Active",
          image: require("../assets/images/home/home_navigation_activity.png")
        },
        {
          name: "Vip",
          image: require("../assets/images/home/home_navigation_vip.png")
        },
        {
          name: "Car",
          image: require("../assets/images/home/home_navigation_car.png")
        },
        {
          name: "More",
          image: require("../assets/images/home/home_navigation_more.png")
        }
      ],
      bannerImages: [
        {
          img: require("../assets/images/home/banner1.png")
        },
        {
          img: require("../assets/images/home/banner2.png")
        }
      ],
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 4000,
          disableOnInteraction: false
        }
      },
      screenProtect: null
    };
  },
  computed: {
    ...mapState("home", {
      screenProtect_VNode: state => state.screenProtect_VNode
    })
  },
  created() {},
  mounted() {
    // 创建屏保
    this.$screenProtect().then(constructor => {
      // 屏保生成成功后的VNode
      this.genScreenProtectVNode(constructor);
    });
  },
  watch: {},
  methods: {
    // 调用home内方法
    ...mapMutations("home", ["genScreenProtectVNode"]),
    // 有点击事件延迟屏保重新计算
    delayScreenProtect() {
      this.screenProtect_VNode.reLoadScreenProtector();
    },
    // 跳转details路由页
    route2(type) {
      this.$emit("route2", type);
    }
  },
  components: { Nav }
};
</script>

<style scoped lang='less'>
#home {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url("../assets/images/screenProtect/bg.png") no-repeat center;
  background-size: cover;
  z-index: 1000;
  .banner {
    position: absolute;
    width: 100%;
    height: 1602px;
    top: 275px;
    background-color: #fff;
    border-top-left-radius: 600px;
    overflow: hidden;
    .swiper {
      width: 100%;
      height: 100%;
      .swiper-slide {
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }
    }
  }
  .btn_group {
    width: 3685px;
    height: 300px;
    position: absolute;
    left: 50%;
    bottom: 165px;
    transform: translateX(-50%);
    display: flex;
    z-index: 100;
    .btn {
      flex: 1;
      background-color: #fff;
      box-shadow: 0px 3px 67px 0px #bfaf91;
      border-radius: 20px 20px 4px 4px;
      background-repeat: no-repeat;
      background-size: 30%;
      background-position: center;
      margin-left: 25px;
      transition: all 0.5s;
      cursor: pointer;
      &:nth-child(1) {
        margin-left: 0px;
      }
      &:hover {
        transform: translateY(-15%);
      }
    }
  }
}
</style>
